<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
.vertical1{
  height: 300px;
  width: 1px;
  background-color: red;
  transform: scaleY(0.5);
  transform-origin: 0 0;

}
.vertical2{
  width: 300px;
  height: 1px;
  background-color: blue;
  transform: scaleX(0.5);
  transform-origin:  0 0;

}
 
    </style>
  </head>
  <body>
    <!-- 实现0.5px的横线-竖线 -->

    <div class="half-px-line vertical1"></div>
    <div class="half-px-line vertical2"></div>
  </body>
</html>

